<template>
  <div class="Integrated_Monitoring_GJGZPZ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-row>
            <el-col :span="12" style="height:800px;width:800px">
              <!-- <div
                id="myChart"
                :style="{width: '100%', height: '100%'}"
              ></div> -->
              <div class="picture_d">
                <span v-for="i in list_item" :title="i.name">
                  <!-- <div :style="i.margin" class="text" @click="handle_top(i)"></div> -->
                  <div class="text" :style="i.style" @click="handle_top(i)">
                    <span class="infp_name"> {{ i.name }}</span>
                  </div>
                </span>
              </div>
            </el-col>
            <el-col
              :span="12"
              style="height:800px;border-left: 1px solid #ccc;padding:10px;"
            >
              <h3 style="text-align: center;margin-bottom:30px">
                服务调用top50
              </h3>
              <div
                style="display:inline-block;width:25%;text-align: center;"
                v-for="i in card_items"
                :key="i.tip"
              >
                <el-badge :value="i.tip" class="item">
                  <el-button
                    size="big"
                    icon="el-icon-s-opportunity"
                    style="font-size:32px"
                  ></el-button>
                  <p class="flow_p">{{ i.text }}</p>
                </el-badge>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      card_items: [
        { text: "转诊信息", tip: "5332" },
        { text: "手术记录查询", tip: "1234" },
        { text: "取药信息", tip: "512" },
        { text: "住院医嘱", tip: "562" },
      ],
      list_item: [
        {
          name: "测试数据1",
          style: "position: absolute;top: 1px;left: 250px;",
        },
        {
          name: "测试数据2",
          style: "position: absolute;top: 264px;left: 160px;",
        },
        {
          name: "测试数据3",
          style: "position: absolute;top: 155px;left: 38px;",
        },
        {
          name: "测试数据4",
          style: "position: absolute;top: 654px;left: 111px;",
        },
        {
          name: "测试数据5",
          style: "position: absolute;top: 89px;left: 37px;",
        },
      ],
    };
  },
  methods: {
    getTop() {
      this.$post("/ServiceManage/Service/LogTopUse?appId=").then((res) => {
        if (res.code == 0) {
          this.card_items = res.data;
        }
      });
    },
    getApplication() {
      this.$post("/ServiceManage/App/List").then((res) => {
        if (res.code == 0) {
          this.list_item = res.data;
        }
      });
    },
    handle_top(val) {
      this.$post("/ServiceManage/Service/LogTopUse?appId=" + val.Id).then(
        (res) => {
          if (res.code == 0) {
            this.card_items = res.data;
          }
        }
      );
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    // this.drawLine();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTop();
    this.getApplication();
  },
};
</script>
<style lang="scss">
.Integrated_Monitoring_GJGZPZ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .picture_d {
    width: 100%;
    height: 100%;
    // border-radius: 400px;
    overflow: hidden;
    padding: 100px;
    background-color: #eee;
    span {
      display: inline-block;
      padding: 0;
    }
    span div {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
      background-color: red;
      // margin-bottom: 5px !important;
      transition: all 0.4s;
    }
    span div:hover {
      cursor: pointer;
      transform: scale(1.6);
    }
    .P_class {
      position: relative;
      align-items: center;
      left: 50%;
    }
  }
  .flow_p {
    display: inline-block;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .infp_name {
    display: inline-block;
    width: 100px;
    margin-top: 19px;
    margin-left: -100%;
  }
}
</style>
